<template>
  <div>
    <v-container>
       <v-slider
        v-model="plantime"
        step="5"
        ticks="always"
        :min="5"
        :max="60"
        prepend-icon="mdi-alarm"
        tick-size="4"
        thumb-label="always"
      ></v-slider>
      <v-slider
        v-model="resttime"
        step="5"
        :min="5"
        :max="30"
        prepend-icon="mdi-bell-sleep"
        ticks="always"
        tick-size="4"
        color="green"
        thumb-label="always"
      ></v-slider>
      <div id="timer">
        <v-btn text outlined @click="startTimer"
          v-show="seconds <= 0">开始</v-btn>
        <v-btn text outlined @click="stopTimer"
          v-show="seconds > 0">放弃</v-btn>
        <div class="count-down">
          {{textValue}}
        </div>
      </div>
    </v-container>
  </div>
</template>

<script>
const formatTime = function(second) {
  if(second <= 0) return "00 : 00"
  let minu = Math.floor(second / 60)
  let sec = second % 60
  minu = (minu < 10) ? '0' + minu : minu
  sec = (sec < 10) ? '0' + sec : sec
  return minu + " : " + sec
}

export default {
  data() {
    return {
      plantime: 25,
      resttime: 5,
      seconds: 0,
      timer:null, // 计时器
    }
  },
  computed:{
    textValue() {
      return formatTime(this.seconds)
    }
  },
  methods: {
    startTimer() {
      let _self = this
      this.seconds = this.plantime * 60
      _self.timer = setInterval(function() {
        _self.seconds --
        if(_self.seconds < 0 ) {
          clearInterval(_self.timer)
        }
      }, 1000)
    },
    stopTimer() {
      clearInterval(this.timer)
      this.seconds= 0
    }
  }
}

</script>
<style scoped>
#timer {
  text-align: center;
}
.count-down{
  padding:3rem 0;
  font-size: 4rem;
}
</style>